<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">通知配置</div>
      <div class="ele-page-desc"> 用于订阅消息配置场景。 </div>
    </div>
    <div class="ele-body">
      <el-card shadow="never">
        <el-alert
          show-icon
          type="warning"
          :closable="false"
          title="注意："
          class="ele-alert-border"
          style="margin-bottom: 20px"
        >
          <div class="ele-text">
            <div>
              请将小程序服务类目选择为：<b class="ele-text-warning"
                >信息查询<em>休闲娱乐</em></b
              >，未选类目将会导致订阅消息不可用。
            </div>
            <div style="margin-top: 10px">
              您的小程序目前服务类目为：<b>{{ industrytext }}</b> <em></em
              ><em></em>
            </div>
          </div>
        </el-alert>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="200px"
          style="max-width: 90%; margin: 10px auto"
        >
          <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >提现结果通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(0)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center"
                  >模板信息（类目：百货/超市/便利店）</th
                >
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item
                    label="提现结果通知模板ID:"
                    prop="withdraw_result_template"
                  >
                    <template-select
                      placeholder="请选择"
                      v-model="form.withdraw_result_template"
                      :data="templateList"
                      :value="form.withdraw_result_template"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>

          <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >票根核销成功通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(1)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center">模板信息（类目：丽人服务）</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item label="票根核销成功通知模板ID:" prop="ticket">
                    <template-select
                      placeholder="请选择"
                      v-model="form.ticket"
                      :data="templateList"
                      :value="form.ticket"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>

          <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >优惠券发放通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(2)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center">模板信息（类目：预约/报名）</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item label="优惠券发放模板ID:" prop="claim_consume">
                    <template-select
                      placeholder="请选择"
                      v-model="form.claim_consume"
                      :data="templateList"
                      :value="form.claim_consume"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>

          <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >优惠券过期通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(3)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center"
                  >模板信息（类目：百货/超市/便利店）</th
                >
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item
                    label="优惠券过期通知模板ID:"
                    prop="consume_expire"
                  >
                    <template-select
                      placeholder="请选择"
                      v-model="form.consume_expire"
                      :data="templateList"
                      :value="form.consume_expire"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>


           <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >审核模板通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(4)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center"
                  >模板信息（类目：百货/超市/便利店）</th
                >
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item
                    label="票根审核模板ID:"
                    prop="ticket_review"
                  >
                    <template-select
                      placeholder="请选择"
                      v-model="form.ticket_review"
                      :data="templateList"
                      :value="form.ticket_review"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>


          
           <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >入驻审核结果通知
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(5)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center"
                  >模板信息（类目：百货/超市/便利店）</th
                >
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item
                    label="入驻审核结果通知模板ID:"
                    prop="store"
                  >
                    <template-select
                      placeholder="请选择"
                      v-model="form.store"
                      :data="templateList"
                      :value="form.store"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>


          
           <table class="ele-table ele-table-border" style="margin-bottom: 20px">
            <colgroup>
              <col width="150" />
              <col width="300" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th
                  >店铺收款
                  <el-link
                    class="content"
                    type="primary"
                    @click="showImgViewer(6)"
                    >查看</el-link
                  >
                  <el-image-viewer
                    v-if="imgViewerVisible"
                    :on-close="closeImgViewer"
                    :url-list="srcList"
                  />
                </th>
                <th style="text-align: center"
                  >模板信息（类目：预约/报名）</th
                >
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>模板ID</td>
                <td>
                  <el-form-item
                    label="店铺收款模板ID:"
                    prop="store"
                  >
                    <template-select
                      placeholder="请选择"
                      v-model="form.payment"
                      :data="templateList"
                      :value="form.payment"
                    />
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>


          <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>


<script>
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import TemplateSelect from './components/template-select';
import { query, save } from '@/api/template';
const DEFAULT_FORM = {
  withdraw_result_template: '',
  ticket: '',
  claim_consume: '',
  consume_expire: '',
  store:'',
  payment :''
};
export default {
  name: 'SysTemplate',
  components: {
    TemplateSelect,
    EleImageUpload,
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      imgViewerVisible: false,
      srcList: [
        '/imgs/template/withdraw.png',
        '/imgs/template/ticket.png',
        '/imgs/template/claim_consume.png',
        '/imgs/template/consume_expire.png',
        '/imgs/template/ticket_review.png',
         '/imgs/template/store.png',
           '/imgs/template/payment.png'

        
      ],

      value: '',
      placeholder: {
        type: String,
        default: '请选择'
      },
      // 提交状态
      loading: false,
      // 表单数据
      form: {
        ...DEFAULT_FORM
      },

      // 表单验证规则
      rules: {},
      templateList: [],
      industrytext: '',
      // 表单验证信息
      validMsg: ''
    };
  },
  methods: {
    showImgViewer(index) {
      this.imgViewerVisible = true;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = 'hidden';
      document.addEventListener('touchmove', m, false); // 禁止页面滑动

      let tempImgList = [...this.srcList];
      let before = [];
      for (let i = 0; i <= index; i++) {
        before.push(tempImgList[i]);
      }

      let after = [];
      for (let i = index; i < tempImgList.length; i++) {
        after.push(tempImgList[i]);
      }

      this.srcList = after.concat(before);
    },
    closeImgViewer() {
      this.srcList = [
        '/imgs/template/withdraw.png',
        '/imgs/template/ticket.png',
        '/imgs/template/claim_consume.png',
        '/imgs/template/consume_expire.png',
          '/imgs/template/ticket_review.png',
         '/imgs/template/store.png',
         '/imgs/template/payment.png'
      ];
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault();
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener('touchmove', m, true);
    },

    /* 提交 */
    submit() {
   

      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;

      
          save(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    query()
      .then((data) => {
        if (data != null) {
          if (data.set != null) {
            this.form = data.set;
          }

          this.industrytext = data.industrytext;
          this.templateList = data.list;
        }
      })
      .catch((e) => {
        this.$message.error(e.message);
      });
  }
};
</script>
